Style Guide Icons
Print this Page
MySolidWorks Icons

Images are great, but they present challenges in designing websites. They add file weight. They require additional http requests. They don’t scale well in a responsive design. An icon font is just exactly like a normal font. The only difference is, instead of a letter mapped to a character or a Unicode area, it is a symbol. It can be easily customized with CSS in size and colors.

Comparison Image Icons vs Font Icons
Image Icons
  • Common Icon formats are GIF and PNG
  • Image formats remain resolution dependent
  • Additional requests to the server
  • Image quality affected if the icon image scaled
  • Bad for responsive design



Font Icons
  • Do anything image icons can (opacity, rotate…)
  • Have transparent knockout
  • Use text based CSS
  • Designed on the fly (on: hover, etc.)
  • Scalable and one size fits all
  • Always crisp even on retina display
  • Easily to be changed in different colors with CSS
  • Good browser support in general

Currently, we have 2 types of icon on MySolidWorks Stie, image icons in .png format and font awsome icons.

Image Icons used on MySolidWorks Site
Flag Image Icons (24px) used for Manufacturers Module on MySolidWorks Site
 
Font Icons used on MySolidWorks Site
     

To see more font icons available, go to Fontawesome site.
More Samples for Icon Fonts - Simple Line Icons
                               
Animated Icons Samples with CSS

On DOM load

On hover

On parent hover